<template>
  <div class="bottom_echarts_box">
    <div id="maintain"></div>
    <!--    文字描述-->
    <div class="device_basic">
      <span>维保倒计时：</span><span :style="{color:'white'}">{{ details.countDownHour }}h</span>
    </div>
    <div class="device_basic back" :style="{color:'#67e1fa'}">
      <span>维保周期：</span><span>{{ details.tendingValue }}h</span>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, inject, onMounted} from "vue"
import {toRefs} from "vue"
import echarts from "echarts"

export default defineComponent({
  name: "maintenance_statistics",
  props: {
    details: {
      type: Object,
      default: {}
    }
  },
  setup(props, context) {
    let {details} = toRefs(props)
    let echarts = inject("echarts");//引入
    const details_data = details.value;
    const option = {
      series: [{
        type: 'gauge',
        progress: {
          show: true,
          width: 8
        },
        axisLine: {
          lineStyle: {
            width: 2
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          length: 2,
          lineStyle: {
            width: 2,
            color: '#999'
          }
        },
        axisLabel: {
          distance: 10,
          color: '#999',
          fontSize: 10
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 2,
          itemStyle: {
            borderWidth: 10
          }
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          fontSize: 26,
          offsetCenter: [0, '70%'],
          color: '#fff'
        },
        data: [{
          value: 70
        }]
      }]
    };
    const init = () => {
      try {
        option.series[0].data[0].value = details_data.countDownHour;
      } catch (e) {
        option.series[0].data[0].value = 0;
      }
      let myChart = echarts.init(document.getElementById("maintain"));
      myChart.setOption(option)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
    /**
     * 初始化
     * */
    onMounted(() => {
      document.getElementById("maintain").removeAttribute('_echarts_instance_')
      init()
    })
    return {
      details_data,
      init
    }
  }
})
</script>

<style scoped lang="scss">
.bottom_echarts_box {
  //padding: 0 10px 10px;


  #maintain {
    width: 100%;
  }
}

.device_basic {
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.back {
  background-color: #2f4268;

}
</style>
